<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import { RegistrationOrderApi } from '@/api/registration-order';
import AuthBar from '@/components/authBar/index.vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useRequest } from '@/hooks/useRequest';
import { useDictStore } from '@/store/dictStore';
import { buildAssetSource } from '@/utils';
import { currRoute } from '@/utils/router.utils';
import PrintPopup from './components/printPopup.vue';

const { getDictLabel } = useDictStore();

const { query } = currRoute();
const { orderNo } = query;

// 获取挂号凭条信息
const { data: orderInfo } = useRequest(() => RegistrationOrderApi.getRegistrationOrderByOrderNo(orderNo));

const printPopupRef = ref<InstanceType<typeof PrintPopup>>();

const canPrint = ref(true);

function handlePrint() {
  printPopupRef.value?.onOpen(orderNo);
  canPrint.value = false;
}

function handleContinue() {
  uni.reLaunch({
    url: '/pages/selfPay/index'
  });
}
</script>

<template>
  <view class="pay-success flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto px-48 pt-30">
      <view class="flex-center flex-col">
        <view class="success-icon">
          <image :src="buildAssetSource('dui.png')" class="h-134 w-134" />
        </view>
        <view class="success-title">
          缴费成功！
        </view>
        <view class="success-subtitle">
          您的
        </view>
        <view class="success-content">
          <view class="success-content__cell">
            <view class="content-cell__label">
              预约单号：
            </view>
            <view class="content-cell__value">
              {{ orderInfo?.orderNo }}
            </view>
          </view>
          <view class="success-content__cell">
            <view class="content-cell__label">
              就诊日期：
            </view>
            <view class="content-cell__value">
              {{ dayjs(orderInfo?.appointmentDate).format('YYYY年MM月DD日 周dd') }}
            </view>
          </view>
          <view class="success-content__cell">
            <view class="content-cell__label">
              就诊时间：
            </view>
            <view class="content-cell__value">
              {{ orderInfo?.timePeriod }}
            </view>
          </view>
          <view class="success-content__cell">
            <view class="content-cell__label">
              科室：
            </view>
            <view class="content-cell__value">
              {{ orderInfo?.departmentName }}
            </view>
          </view>
          <view class="success-content__cell">
            <view class="content-cell__label">
              医生：
            </view>
            <view class="content-cell__value">
              {{ orderInfo?.doctorName }}（{{ getDictLabel(orderInfo?.professionalTitle, DictKeyEnum.EMPLOYEE_TITLE) }}）
            </view>
          </view>
          <view class="success-content__cell">
            <view class="content-cell__label">
              取号地点：
            </view>
            <view class="content-cell__value">
              {{ orderInfo?.departmentAddress }}
            </view>
          </view>
        </view>
      </view>

      <view class="success-action flex justify-center">
        <view class="success-action__btn">
          <wd-button block :disabled="!canPrint" @click="handlePrint">
            打印凭条
          </wd-button>
        </view>
        <view class="success-action__btn ml-30">
          <wd-button block @click="handleContinue">
            继续挂号
          </wd-button>
        </view>
      </view>
    </view>
    <PrintPopup ref="printPopupRef" />
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.pay-success {
  background-color: var(--bg-color);
  height: 100%;

  .success-icon {
    @apply flex-center;
    width: 220px;
    height: 220px;
    background: #e5efff;
    border-radius: 50%;
  }

  .success-title {
    font-size: 60px;
    font-weight: bold;

    color: var(--text-color);
    margin-top: 20px;
  }

  .success-subtitle {
    font-size: 28px;
    color: var(--secondary-text-color);
    margin-top: 20px;
  }

  .success-content {
    background: #dfeafc;
    border-radius: 50px;
    padding: 60px 147px;
    margin: 40px 0;
    max-width: 827px;

    .success-content__cell {
      @apply flex;
      color: var(--text-color);
      font-size: 36px;
      margin-bottom: 20px;

      .content-cell__label {
        font-weight: 400;
      }

      .content-cell__value {
        font-weight: 500;
      }
    }
  }

  .success-action {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    .success-action__btn {
      width: 370px;
      :deep(.wd-button) {
        font-weight: bold;
      }
    }
  }

  .success-image {
    @apply flex-center;
  }
}
</style>
